<?php
showtips($touclicklang['tcmsg0014'],'tips1',true,$touclicklang['tipsTitle4']);


if(submitcheck('finalsubmit')) {
	if($_POST['tpflag'] != "" && $_POST['crimg'] != ""){
		$data = array(
				"b" => $touclickB,
				"z" => $touclickZ,
				"v" => $touclickV,
				"d" => $touclickD,
				"pf" => $touclickPF,
				'cs' => $touclickCS,
				"op" => "1001",
				"cl" => $_POST['tpflag'],
				"bi" => urlencode($_POST['crimg']),
				"pw" => base64_encode($_POST['prtxtf']),
				"cw" => base64_encode($_POST['cltxtf']),
				"sp" => urlencode($_POST['smallpic']),
				"tr" => $_POST['trnumf'],
				"tw" => base64_encode($_POST['tiptxtf']),
				"tcs" => base64_encode($_POST['testcs']),
				);
		//print_r($data);
		$resRep = touclick_request("http://api.touclick.com/captchadiy.touclick", $data, 80);
		if($resRep['content'] == "alert"){
			cpmsg("{$touclicklang['alert']}", "action=plugins&cp=$cp&pmod=control&operation=$operation&do=$do", 'error');
		}elseif($resRep['content'] == "alerts"){
			cpmsg("{$touclicklang['alerts2']}", "action=plugins&cp=$cp&pmod=control&operation=$operation&do=$do", 'error');
		}elseif($resRep['content'] == "wait"){
			cpmsg("{$touclicklang['wait']}", "action=plugins&cp=$cp&pmod=control&operation=$operation&do=$do", 'error');
		}elseif($resRep['content'] == "live"){
			cpmsg("{$touclicklang['live']}", "action=plugins&cp=$cp&pmod=activate&operation=$operation&do=$do", 'error');
		}elseif($resRep['content'] == "vip"){
			cpmsg("{$touclicklang['vip']}", "action=plugins&cp=$cp&pmod=control&operation=$operation&do=$do", "error");
		}elseif($resRep['content'] == "yes"){
			cpmsg("{$touclicklang['yes2']}", "action=plugins&cp=$cp&pmod=control&operation=$operation&do=$do", 'succeed');
		}elseif($resRep['content'] == "out"){
			cpmsg("{$touclicklang['outdiy']}", "action=plugins&cp=$cp&pmod=control&operation=$operation&do=$do", "error");
		}else{
			
			cpmsg("{$touclicklang['others']}", "action=plugins&cp=$cp&pmod=control&operation=$operation&do=$do", 'error');
		}
	}else{
		cpmsg("{$touclicklang['paraneed']}", "action=plugins&cp=$cp&pmod=control&operation=$operation&do=$do", 'error');
	}
}

showtableheader($touclicklang['uploadiy'],'','','2');
echo <<<EOF
<tr class='hover'>
<td colspan=2><img id="banner" src="source/plugin/touclick/image/control/step1.png"/></td>
</tr>
<TR id="step10">
<TD class=td27 colSpan=2 s="1">{$touclicklang['selectcaptcha']}</TD></TR>
<TR class=noborder id="step11"><TD class="vtop rowform">
	<UL onmouseover=altStyleTc(this);>
	<LI id="cha1"><INPUT class=radio type=radio value=1 autocomplete="off" name="tcType">&nbsp;{$touclicklang['picword']}</LI>
	<LI id="cha3"><INPUT class=radio type=radio value=3 autocomplete="off" name="tcType">&nbsp;{$touclicklang['picpic']}</LI></UL></TD>
	<TD class="vtop tips2" s="1"></TD>
</TR>
	
EOF;
echo <<<EOF
<tr id="shilibar" style="display:none;" class='hover'>
<td style="padding:0px;margin:0px;">{$touclicklang['tcmsg0024']}</td><td><img id="shili" style="width:269px;height:182px;" src="source/plugin/touclick/image/control/pictxt.png"/></td>
</tr>
EOF;
showtablefooter();




echo <<<EOF
<div  id="skincrop">
<table class="tb tb2 " id='skin' style="display:none;">
<tr>
		<td class=td27 s="1" colspan=2>{$touclicklang['uploadiybg']}</td>
</tr>
<tr class=noborder>
<td class="vtop rowform"  >
<form enctype="multipart/form-data" action="source/plugin/touclick/func/touclick_upimg.func.php" target="ifram_sign" method="POST">
        <table><tr><td ><input name="submits" id="submits" value="1" type="hidden">
        <input name="cset" id="cset" value="{$touclickCS}" type="hidden">
        <input name="test_file"  type="file" id="test_file"  />
        <input type="image" style="display:none;"  id="submit_btn">
		</td><td ><img id="bgtcImg" onclick="nextStep(20);" style="cursor:pointer;" src="source/plugin/touclick/image/control/upimg.png"/></td></table>
 </form>
<iframe name="ifram_sign" src="" frameborder="0" height="0" width="0" marginheight="0" marginwidth="0"></iframe>

</td>
<td>{$touclicklang['tcmsg0016']}</td>
</tr>
<table>

<table id="preupimg" style="display:none;">

<tr ><td>
    <link href="source/plugin/touclick/js/crop/css/jquery-ui-1.7.2.custom.css" rel="Stylesheet" type="text/css" /> 
    <link href="source/plugin/touclick/js/crop/css/jquery.cropzoom.css" rel="Stylesheet" type="text/css" /> 
    <script type="text/javascript" src="source/plugin/touclick/js/crop/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="source/plugin/touclick/js/crop/jquery-ui-1.8.14.custom.min.js"></script>
    <script type="text/javascript" src="source/plugin/touclick/js/crop/jquery.cropzoom.js"></script>
    <!--[if IE 6]><link rel="stylesheet" href="source/plugin/touclick/js/crop/css/style.ie6.css" type="text/css" media="screen" /><![endif]-->
    <!--[if IE 7]><link rel="stylesheet" href="source/plugin/touclick/js/crop/css/style.ie7.css" type="text/css" media="screen" /><![endif]-->

    <script type="text/javascript">
		(function ($,window) {
    var _url = "source/plugin/touclick/image/uptemp/bgimg.jpg";
	var _width = 440;
	var _height = 300;
    var touclick = window.TouClick || {};
    touclick.cropzoomLoadImage = function (url,width,height) {
        var cropzoom = $('#crop_container').cropzoom({
            width: 440,
            height: 300,
            bgColor: '#CCC',
            enableRotation: true,
            enableZoom: true,
            zoomSteps: 10,
            rotationSteps: 10,
            selector: {
                centered: true,
                borderColor: 'blue',
                borderColorHover: 'red'
            },
            image: {
                source: url,
                width: width,
                height: height,
                minZoom: 10,
                maxZoom: 400
            }
        });
        cropzoom.setSelector(41, 55, 356, 179, true);
        $('#crop').click(function () {
            cropzoom.send('source/plugin/touclick/func/touclick_crop.func.php', 'POST', {}, function (rta) {
                $('#touclickimage').attr('src', rta);
                if(rta=="alert"){
                	alert("Tell me by QQ-915623948,thanks.");
                }else{
					document.getElementById('crimg').value = '{$_G['siteurl']}'+rta;
				}
            });
        });
        $('#restore').click(function () {
            $('.result').find('img').remove();
            $('.result').find('.txt').show()
            cropzoom.restore();
        })
    }
    $(document).ready(function () {
        touclick.cropzoomLoadImage(_url,_width,_height);
    })
    window.TouClick = touclick;
})(TouClick.jQuery,window);
</script>
		<div id="crop_container"></div>
		</td>
						
		<td valign="center">
		<div style="position:relative;">
		<div style="position:absolute;left:15px;top:-25px;"><span id="crop">
				<a href="javascript:void(0)"><img src="source/plugin/touclick/image/control/cropbtn.png"></a>
		  </span>
		 </div><div style="position:absolute;left:15px;top:10px;">
		  <span id="restore">
				<a href="javascript:void(0)"><img src="source/plugin/touclick/image/control/restore.png"></a>
		  </span>
		</div>
		</div>
		</td>
		 
		<td><div style="position: relative;">
EOF;

?>
<script type="text/JavaScript">
var skinPath = "source/plugin/touclick/image/";
var skinName = "black";
var htmlCode = ' <div id="touclick">';
htmlCode += '<table  cellspacing="0" cellpadding="0">';
htmlCode += '<tbody>';
htmlCode += ' <tr style="height:33px; background-color:#fff;">';
htmlCode += ' <td class="tou1" style="background-image:url(' + skinPath + skinName + '/side2.png);background-position:0px 0px;"></td> ';
htmlCode += ' <td class="tou2" style="background-image:url(' + skinPath + skinName + '/side2.png);background-position:-10px 0px;">';
htmlCode += '<div style="width:356px; height:33px; overflow:hidden;">';
htmlCode += ' <div class="touicon" id="touclickclose" style="margin-top:7px;margin-right:0px;"></div>';
htmlCode += '</div>';
htmlCode += '</td> ';
htmlCode += ' <td class="tou3" style="background-image:url(' + skinPath + skinName + '/side2.png);background-position:-366px 0px;"></td>';
htmlCode += ' </tr>';
htmlCode += ' <tr style="height:179px;" >';
htmlCode += '<td class="tou1" style="background-color:#fff; background-image:url(' + skinPath + skinName + '/side.png); height:179px; overflow:hidden;"></td> ';
htmlCode += '<td class="tou2" style="text-align:center; height:179px;">';
htmlCode += '<div style="width:356px;height:179px;overflow:hidden;position:relative;">';
htmlCode += '<img id="touclickwait" alt="wait" src="' + skinPath + skinName + '/wait.gif" style="margin-top:62px;margin-left:114px;display:none;" />';
htmlCode += ' <img id="touclickbackup" alt="backup" style="margin:0px;padding:0px; display:none;" />';
htmlCode += '<img id="touclickimage" alt="image" src="source/plugin/touclick/image/control/blank.png" style="margin:0px;padding:0px;" /> ';
htmlCode += ' </div>';
htmlCode += ' </td>';
htmlCode += '<td class="tou3" style="background-color:#fff; background-image:url(' + skinPath + skinName + '/side.png); background-position:-10px 0px; height:179px;overflow:hidden;"></td>';
htmlCode += '</tr>';
htmlCode += ' <tr style="height:42px; background-color:#fff;">';
htmlCode += '<td class="tou1"style="background-image:url(' + skinPath + skinName + '/side2.png);background-position:0px -33px;"></td> ';
htmlCode += '<td class="tou2" style="background-image:url(' + skinPath + skinName + '/side2.png);background-position:-10px -33px;">';
htmlCode += '<div style="width:223px; height:42px; overflow:hidden;margin-left:133px;">';
htmlCode += ' <span id="touspan1"></span>';
htmlCode += '<span id="touspan2"></span>';
htmlCode += ' <div class="touicon" id="touclickreload" style="margin-top:7px;margin-right:5px;"></div>';
htmlCode += '</div>';
htmlCode += ' </td>';
htmlCode += ' <td class="tou3" style="background-image:url(' + skinPath + skinName + '/side2.png);background-position:-366px -33px;"></td>';
htmlCode += '</tr>';
htmlCode += ' </tbody>';
htmlCode += ' </table>';
htmlCode += '</div>';
htmlCode += ' <style type="text/css">';
htmlCode += 'body {  }';
htmlCode += '#touclick { width:376px;height:254px; position:absolute; z-index:1988;left:110px;top:-130px; }';
htmlCode += ' #touclick table{width:376px;height:254px;border:0px;padding:0px;margin:0px;position:absolute;}';
htmlCode += '#touclick tbody {margin:0px; padding:0px;border:0px;width:376px;height:254px;}';
htmlCode += '#touclick tr {width:376px; border:0px; padding:0px;margin:0px;}';
htmlCode += '#touclick td { border:0px;padding:0px; margin:0px;border:0px;}';
htmlCode += ' #touclick .tou1,#touclick .tou3 {width:10px;}';
htmlCode += ' #touclick .tou2 {width:356px;}';
htmlCode += ' #touclick .touicon { width:23px;height:23px;background-image:url(' + skinPath + skinName + '/side.png);float:right;cursor:pointer;}';
htmlCode += '#touclickreload { background-position:0px -179px;}';
htmlCode += ' #touclickreload:hover {background-position:0px -202px;}';
htmlCode += '#touclickclose {background-position:0px -225px;}';
htmlCode += '#touclickclose:hover {background-position:0px -248px;}';
htmlCode += '#touspan1 { color:#ff6a00;font-family:"Microsoft YaHei";font-weight:bold;float:left; margin-top:8px;}';
htmlCode += '#touspan2 {color:#505050; font-family:"Microsoft YaHei";font-weight:bold; float:left; margin-top:8px;}';
htmlCode += '#toufloatdiv { position:absolute;border-color:#fff; border-style:solid; margin:0px;padding:0px;}';
htmlCode += '</style>';
document.write(htmlCode);
</script>
<?php 
echo <<<EOF
		</div></td></tr></table></div>
	<div id="prt" style="display:none;">
		<table class="tb tb2 ">
		<tr class="hover">
		<td class=td27 colspan=2 s="1">{$touclicklang['printword2']}</td>
		</tr>
		<tr class=noborder><td class="vtop rowform"><input autocomplete="off" type='text' class="txt" id='prtxt' onchange="nextStep(22)" value=""></td><td>{$touclicklang['printwordtip']}</td></tr>
		<tr class="hover">
		<td class=td27 colspan=2 s="1">{$touclicklang['clickword2']}</td>
		</tr>
		<tr class=noborder><td class="vtop rowform"><input autocomplete="off" type='text' class="txt" id='cltxt' onchange="nextStep(23)" value=""></td><td>{$touclicklang['clickwordtip']}</td></tr>
		</table>
	</div>
		
	<div id="prp" style="display:none;">
		<table class="tb tb2 ">
		<tr class="hover">
		<td class=td27 colspan=2 s="1">{$touclicklang['uploadppic']}</td>
		</tr>
		<tr class=noborder>
		<td class="vtop rowform">
		<!--<input name="smpic" type="file" id="smpic" size="12" style="width:150px;"/>-->
		<form enctype="multipart/form-data" action="source/plugin/touclick/func/touclick_upimg.func.php" target="ifram_sign2" method="POST">
	        <table><tr><td ><input name="submits" id="submits" value="2" type="hidden">
	        <input name="cset" id="cset" value="{$touclickCS}" type="hidden">
	        <input name="test_file" type="file" id="test_file"  />
	        <input type="image" style="display:none;"  id="smpic_sub">
			</td><td ><img src="source/plugin/touclick/image/control/upimg.png" id="smpicbtn" style="cursor:pointer;" onclick="nextStep(21);" /></td></table>
		</form>
		<iframe name="ifram_sign2" src="" frameborder="0" height="0" width="0" marginheight="0" marginwidth="0"></iframe>

		</td><td><font >{$touclicklang['tcmsg0016']}</font></td></tr>
		<tr class="hover">
		<td class=td27 colspan=2 s="1">{$touclicklang['printransparent']}</td>
		</tr>
		<tr class=noborder><td class="vtop rowform"><input autocomplete="off" type='text' class="txt" onchange="nextStep(24)" id='trnum'></td><td>{$touclicklang['ptransparentip']}</td></tr>
		<tr class="hover">
		<td class=td27 s="1">{$touclicklang['tipword2']}</td>
		</tr>
		<tr class="noborder"><td class="vtop rowform"><input autocomplete="off" type='text' class="txt" onchange="nextStep(25)" id='tiptxt'></td><td>{$touclicklang['tipwordtip']}</td></tr>
		</table>
	</div>
<table>
<tr id="st1" >

		<td colspan='2'><input type="button" class='btn' value="{$touclicklang['nextstep']}" onclick="nextStep(1);" /></td>
</tr>
<tr id="st2" style="display:none;">
		<td><input type="button" class="btn" value="{$touclicklang['prestep']}" onclick="preStep(1)" /></td>
		<td>&nbsp;&nbsp;<input type="button" class='btn' value="{$touclicklang['nextstep']}" onclick="nextStep(2);" /></td>
</tr>
<tr id="st3" style="display:none;">
		<td><input type="button" class="btn" value="{$touclicklang['prestep']}" onclick="preStep(2)" /></td>
		<td>&nbsp;&nbsp;<input type="button" class='btn' value="{$touclicklang['nextstep']}" onclick="nextStep(3);" /></td>
</tr>
</table>
EOF;


showformheader("plugins&cp=$cp&pmod=control&operation=$operation&do=$do", "accept-charset='utf-8' enctype='multipart/form-data'",'finalsubmitForm','post');
echo <<<EOF
<input id="tpflag" name="tpflag" type="hidden" value="0" />
<input id="crimg" name="crimg" type="hidden" value="0" />
<input id="prtxtf" name="prtxtf" type="hidden" value=""/>
<input id="cltxtf" name="cltxtf" type="hidden" value=""/>
<input id="smallpic" name="smallpic" type="hidden" value=""/>
<input id="trnumf" name="trnumf" type="hidden" value=""/>
<input id="tiptxtf" name="tiptxtf" type="hidden" value=""/>
<input id="testcs" name="testcs" type="hidden" value="{$touclicklang['tcmsg0022']}"/>
<input id="finalsubmit" type="submit" style="display:none;" name="finalsubmit">
EOF;
showformfooter();
echo "</div>";

?>

<script type="text/JavaScript">
function altStyleTc(obj, disabled) {
	function altStyleClear(obj) {
		var input,
		lis,
		i;
		lis = obj.parentNode.getElementsByTagName('li');
		for (i = 0; i < lis.length; i++) {
			lis[i].className = '';
		}
	}
	var disabled = !disabled ? 0: disabled;
	if (disabled) {
		return;
	}
	var input,
	lis,
	i,
	cc,
	o;
	cc = 0;
	lis = obj.getElementsByTagName('li');
	for (i = 0; i < lis.length; i++) {
		lis[i].onclick = function(e) {
			o = BROWSER.ie ? event.srcElement.tagName: e.target.tagName;
			altKey = BROWSER.ie ? window.event.altKey: e.altKey;
			if (cc) {
				return;
			}
			cc = 1;
			input = this.getElementsByTagName('input')[0];
			if (input.getAttribute('type') == 'checkbox' || input.getAttribute('type') == 'radio') {
				if (input.getAttribute('type') == 'radio') {
					altStyleClear(this);
				}
				if (BROWSER.ie || o != 'INPUT' && input.onclick) {
					input.click();
				}
				if (this.className != 'checked') {
					this.className = 'checked';
					input.checked = true;
					document.getElementById("tpflag").value=input.value;
					
					var flag = this.id;
					
					
					if(flag =="cha1"){
						document.getElementById("shilibar").style.display = "block";
						document.getElementById("shili").src ="source/plugin/touclick/image/control/pictxt.png";
					}else if(flag == "cha3"){
						document.getElementById("shilibar").style.display = "block";
						document.getElementById("shili").src ="source/plugin/touclick/image/control/picpic.png";
					}
				} else {
					this.className = '';
					input.checked = false;
				}
				if (altKey && input.name.match(/^multinew\[\d+\]/)) {
					miid = input.id.split('|');
					mi = 0;
					while ($(miid[0] + '|' + mi)) {
						$(miid[0] + '|' + mi).checked = input.checked;
						if (input.getAttribute('type') == 'radio') {
							altStyleClear($(miid[0] + '|' + mi).parentNode);
						}
						$(miid[0] + '|' + mi).parentNode.className = input.checked ? 'checked': '';
						mi++;
					}
				}
			}
		};
		lis[i].onmouseup = function(e) {
			cc = 0;
		}
	}
}


function nextStep(step)
{
	switch (step)
	{
		case 1:
			if(document.getElementById("tpflag").value != "0"){
				document.getElementById("banner").src = "source/plugin/touclick/image/control/step2.png";
				document.getElementById("step10").style.display = "none";
				document.getElementById("step11").style.display = "none";
				document.getElementById("skin").style.display = "block";
				document.getElementById("skincrop").style.display = "block";
				
				document.getElementById("st1").style.display="none";
				document.getElementById("st2").style.display="block";
				document.getElementById("st3").style.display="none";
				document.getElementById("shilibar").style.display="none";
			}
			break;
		case 2:
			if(document.getElementById("crimg").value != "0"){
				document.getElementById("banner").src = "source/plugin/touclick/image/control/step3.png";
				document.getElementById("skincrop").style.display = "none";
				var tpt = document.getElementById('tpflag').value;
				if(tpt != "0"){
					if(tpt == 1)
					{
						document.getElementById("prt").style.display="block";
					}else if(tpt == 3)
					{
						document.getElementById("prp").style.display="block";
					}
					document.getElementById("st1").style.display="none";
					document.getElementById("st2").style.display="none";
					document.getElementById("st3").style.display="block";
					
				}
			}
			break;
		case 3:

			var tpt = document.getElementById('tpflag').value;
			if(tpt != "0"){
				if(tpt == 1)
				{
					var prtxt = document.getElementById('prtxt').value;
					var cltxt = document.getElementById('cltxt').value;
					if(prtxt != "" && cltxt != "" && prtxt.length< 8 && cltxt.length< 5){
						document.getElementById("prtxtf").value = prtxt;
						document.getElementById("cltxtf").value = cltxt;
						document.getElementById("finalsubmit").click();
						
						document.getElementById("prt").style.display="none";
	
						document.getElementById("st1").style.display="none";
						document.getElementById("st2").style.display="none";
						document.getElementById("st3").style.display="none";
						document.getElementById("banner").src = "source/plugin/touclick/image/control/step4.png";
					}else{
						if(document.getElementById('prtxt').value == "" || document.getElementById('prtxt').value.length > 8){
							document.getElementById('prtxt').style.borderColor = "#FF6347";
						}else{
							setBoder('prtxt');
						}
						if(document.getElementById('cltxt').value == "" || document.getElementById('cltxt').value.length > 5){
							document.getElementById('cltxt').style.borderColor = "#FF6347";
						}else{
							setBoder('cltxt');
						}
					}
				}else if(tpt == 3)
				{
					var smallpic = document.getElementById("smallpic").value;
					var trnum = document.getElementById("trnum").value;
					var tiptxt = document.getElementById("tiptxt").value;

					if(smallpic != "" && trnum != "" && tiptxt != "" && trnum < 101 && trnum >9 && tiptxt.length < 7 && !isNaN(trnum)){
						document.getElementById("smallpic").value = '<?php echo $_G['siteurl'];?>'+smallpic;
						document.getElementById("trnumf").value = trnum/100;
						document.getElementById("tiptxtf").value = tiptxt;
						document.getElementById("finalsubmit").click();

						document.getElementById("prp").style.display="none";
						
						document.getElementById("st1").style.display="none";
						document.getElementById("st2").style.display="none";
						document.getElementById("st3").style.display="none";
						document.getElementById("banner").src = "source/plugin/touclick/image/control/step4.png";
					}else{
						if(trnum == "" || trnum > 101 || trnum <9 || isNaN(trnum)){
							document.getElementById('trnum').style.borderColor = "#FF6347";
						}else{
							setBoder('trnum');
						}
						
						if(tiptxt == "" || tiptxt.length > 7){
							document.getElementById('tiptxt').style.borderColor = "#FF6347";
						}else{
							setBoder('tiptxt');
						}
					}
				}
				
			}
			
			break;
		case 4:
			break;
		case 20:
			document.getElementById("submit_btn").click();
			break;
		case 21:
			document.getElementById("smpic_sub").click();
			break;
		case 22:
			if(document.getElementById('prtxt').value == "" || document.getElementById('prtxt').value.length > 8){
				document.getElementById('prtxt').style.borderColor = "#FF6347";
			}else{
				setBoder('prtxt');
			}
			break;
		case 23:
			if(document.getElementById('cltxt').value == "" || document.getElementById('cltxt').value.length > 7){
				document.getElementById('cltxt').style.borderColor = "#FF6347";
			}else{
				setBoder('cltxt');
			}
			break;
		case 24:
			var trn = document.getElementById('trnum').value;
			if(trn == "" || trn > 101 || trn <9 || isNaN(trn)){
				document.getElementById('trnum').style.borderColor = "#FF6347";
			}else{
				setBoder('trnum');
			}
			break;
		case 25:
			if(document.getElementById('tiptxt').value == "" || document.getElementById('tiptxt').value.length > 7){
				document.getElementById('tiptxt').style.borderColor = "#FF6347";
			}else{
				setBoder('tiptxt');
			}
			break;
	}
}

function setBoder(str)
{
	document.getElementById(str).style.borderTopColor = "#666";
	document.getElementById(str).style.borderRightColor = "#CCC";
	document.getElementById(str).style.borderBottomColor = "#CCC";
	document.getElementById(str).style.borderLeftColor = "#666";
}

function preStep(step)
{
	switch (step)
	{
		case 1:
			document.getElementById("banner").src = "source/plugin/touclick/image/control/step1.png";
			document.getElementById("step10").style.display = "block";
			document.getElementById("step11").style.display = "block";
			document.getElementById("skincrop").style.display = "none";
			
			document.getElementById("st1").style.display="block";
			document.getElementById("st2").style.display="none";
			document.getElementById("st3").style.display="none";
			document.getElementById("shilibar").style.display="block";
			break;
		case 2:
			document.getElementById("banner").src = "source/plugin/touclick/image/control/step2.png";
			document.getElementById("step10").style.display = "none";
			document.getElementById("step11").style.display = "none";
			document.getElementById("skincrop").style.display = "block";

			var tpt = document.getElementById('tpflag').value;
			if(tpt != 0){
				if(tpt == 1)
				{
					document.getElementById("prt").style.display="none";
				}else if(tpt == 3)
				{
					document.getElementById("prp").style.display="none";
				}
			}
			
			document.getElementById("st1").style.display="none";
			document.getElementById("st2").style.display="block";
			document.getElementById("st3").style.display="none";
			
			break;
	}
}

</script>